<template>
  <div>
    <el-card class="box-card">
      <!--头部-->
      <template #header>
        <div class="card-header">
          <div class="cardsize">
            <h2>志愿填报</h2>
            <div>共 {{ totalCount.count }} 单</div>
            <div>已处理 {{ totalCount.orderStatus_1 }} 单</div>
            <div>已审核 {{ totalCount.orderStatus_2 }} 单</div>
            <div>已完成 {{ totalCount.orderStatus_3 }} 单</div>
          </div>
        </div>
      </template>
      <!--列表数据-->
      <el-row :gutter="20">
        <el-col :span="5">
          <el-input
            v-model="pageData.search"
            placeholder="考生/考生/手机号"
            clearable
            @clear="searchChange"
          >
            <template #append>
              <el-button
                type="primary"
                style="height: 40px"
                @click="searchChange"
                >搜索</el-button
              >
            </template>
          </el-input>
        </el-col>
        <el-col :span="3">
          <el-select
            :popper-options="{
              modifiers: [
                { name: 'computeStyles', options: { adaptive: false } },
              ],
            }"
            v-model="pageData.gkaProvinceNumId"
            class="m-2"
            placeholder="省份"
            size="large"
            clearable
            @change="searchChange"
          >
            <el-option
              v-for="item in provincelist"
              :key="item.id"
              :label="item.provinceName"
              :value="item.id"
            />
          </el-select>
        </el-col>
        <el-col :span="3">
          <el-select
            :popper-options="{
              modifiers: [
                { name: 'computeStyles', options: { adaptive: false } },
              ],
            }"
            v-model="pageData.graduate_time"
            class="m-2"
            placeholder="高考年份"
            size="large"
            clearable
            @change="searchChange"
          >
            <el-option
              v-for="item in gaokaoyear"
              :key="item.val"
              :label="item.name"
              :value="item.val"
            />
          </el-select>
        </el-col>
        <el-col :span="3">
          <el-select
            :popper-options="{
              modifiers: [
                { name: 'computeStyles', options: { adaptive: false } },
              ],
            }"
            v-model="pageData.orderStatus"
            class="m-2"
            placeholder="状态"
            size="large"
            clearable
            @change="searchChange"
          >
            <el-option
              v-for="item in statuslist"
              :key="item.val"
              :label="item.name"
              :value="item.val"
            />
          </el-select>
        </el-col>
        <el-col :span="10" style="display: flex; justify-content: flex-end">
          <el-button style="height: 40px" @click="onClickBatchDistribution"
            >批量分配</el-button
          >
          <el-button
            :icon="Bottom"
            style="height: 40px"
            @click="onClickOrdersExport"
            >下载</el-button
          >
          <el-button
            type="primary"
            :icon="Plus"
            style="height: 40px"
            @click="addUserOrder"
            >创建客单</el-button
          >
        </el-col>
      </el-row>
      <el-divider />
      <el-table
        :data="tableData"
        stripe
        style="width: 100%"
        v-loading="isRequest"
        @selection-change="handleSelectionChange"
        :header-cell-style="{ 'border-bottom': 'none' }"
        :header-row-style="{ height: '60px' }"
        :cell-style="{ height: '60px', 'border-bottom': 'none' }"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column prop="gkaProvinceName" label="省份" align="center">
        </el-table-column>
        <el-table-column prop="studentName" label="姓名" align="center">
          <template #default="scope">
            <el-tooltip
              class="box-item"
              effect="dark"
              :content="scope.row.gkaProvinceName"
              placement="top"
            >
              <div
                v-if="!scope.row.student"
                style="color: #165dff; cursor: pointer"
              >
                {{ scope.row.studentName }}
              </div>
              <div
                v-else
                style="color: #165dff; cursor: pointer"
                @click="lookUserInfo(scope.row)"
              >
                {{ scope.row.studentName }}
              </div>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column prop="student.sex" label="性别" align="center">
          <template #default="scope">
            <div>{{ (scope.row.student || {}).sex == 0 ? '男' : '女' }}</div>
          </template>
        </el-table-column>
        <el-table-column
          prop="studentMobile"
          label="手机号"
          width="180"
          align="center"
        />
        <el-table-column
          prop="student.graduate_time"
          label="高考年份"
          width="150"
          align="center"
        />
        <el-table-column prop="grade" label="成绩" width="220">
          <template #default="scope">
            <div v-if="!!scope.row.student">
              <div
                v-if="
                  scope.row.isGKB == 1 && scope.row.student.gkb_score_num == 0
                "
                @click="lookGradeChange(scope.row)"
                style="color: rgb(22, 93, 255)"
              >
                请创建高考成绩
              </div>
              <div
                v-else-if="
                  scope.row.isGKB == 1 && scope.row.student.gkb_score_num == 1
                "
              >
                {{
                  scope.row.student
                    ? scope.row.student.score +
                      '分 ' +
                      scope.row.student.section +
                      '位 ' +
                      scope.row.student.sgname
                    : ''
                }}
              </div>
              <div v-else>
                {{
                  scope.row.student
                    ? scope.row.student.score +
                      '分 ' +
                      scope.row.student.section +
                      '位 ' +
                      scope.row.student.sgname
                    : ''
                }}
                <el-icon
                  size="18"
                  @click="lookGradeChange(scope.row)"
                  style="cursor: pointer"
                >
                  <EditPen />
                </el-icon>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="teacher" label="老师" width="120" align="center">
          <template #default="scope">
            <div v-if="!scope.row.student">
              {{ scope.row.teacher }}
            </div>
            <div v-else>
              <el-dropdown trigger="click" @command="onClickAccounList">
                <span class="el-dropdown-link">
                  {{ scope.row.teacher }}
                  <el-icon class="el-icon--right">
                    <arrow-down />
                  </el-icon>
                </span>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item
                      :command="{ item, index: scope.$index }"
                      v-for="(item, index) in teacherArr"
                      :key="index"
                      >{{ item.realName }}</el-dropdown-item
                    >
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="creationTime"
          label="创建时间"
          width="160"
          align="center"
        >
          <template #default="scope">
            <div>{{ scope.row.creationTime }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态" align="center">
          <template #default="scope">
            <div>{{ scope.row.orderStatus == 1 ? '已处理' : '未处理' }}</div>
          </template>
        </el-table-column>
        <el-table-column
          prop="zyTableCount"
          label="报告"
          fixed="right"
          align="center"
        >
          <template #default="scope">
            <div @click="handleEva(scope.row)" class="eva">
              {{ scope.row.evaluationCount }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="table" label="志愿表" fixed="right" width="120">
          <template #default="scope">
            <div
              v-if="!!scope.row.student"
              class="zyb-count"
              style="cursor: pointer"
              @click="onClickzybList(scope.row)"
            >
              <div>模{{ scope.row.zyTableCommonCount }}</div>
              <div>高{{ scope.row.zyTableGKCount }}</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="填报" width="120">
          <template #default="scope">
            <div v-if="!!scope.row.student">
              <el-tooltip
                v-if="
                  scope.row.isGKB == 1 && scope.row.student.gkb_score_num == 0
                "
                class="box-item"
                effect="dark"
                content="请先创建高考成绩"
                placement="top"
              >
                <el-icon
                  size="24"
                  :color="'#165dff'"
                  style="cursor: pointer; margin-top: 8px; color: #86909c"
                >
                  <Edit />
                </el-icon>
              </el-tooltip>

              <el-tooltip
                v-else
                class="box-item"
                effect="dark"
                content="填报"
                placement="top"
              >
                <el-icon
                  size="24"
                  :color="'#165dff'"
                  style="cursor: pointer; margin-top: 8px"
                  @click="fillSubmitChange(scope.row)"
                >
                  <Edit />
                </el-icon>
              </el-tooltip>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div class="right" style="margin-top: 20px">
        <el-config-provider :locale="zhCn">
          <el-pagination
            v-model:current-page="pageData.page"
            v-model:page-size="pageData.pageSize"
            :page-sizes="[10, 20, 30]"
            layout="total, sizes, prev, pager, next, jumper"
            :total="pageData.total"
            @size-change="pagination"
            @current-change="pagination"
          />
        </el-config-provider>
      </div>
    </el-card>
    <!-- 批量分配 -->
    <batchDistribution
      ref="batchDistributionRef"
      :teacherArr="teacherArr"
      :selStudentArr="selStudentArr"
      @refreshList="pagination"
    >
    </batchDistribution>
    <!-- 添加用户 -->
    <addUserInfo
      ref="addUserInfoRef"
      :provincelist="provincelist"
      :gaokaoyear="gaokaoyear"
      :kd_price="kd_price"
      @refreshStudentList="pagination"
    ></addUserInfo>
    <!--查看用户详情-->
    <lookuserDate ref="lookuserDateRef"></lookuserDate>
    <!--用户修改信息-->
    <userUpdate
      ref="userUpdatesRef"
      @refreshStudentList="pagination"
    ></userUpdate>
    <!--志愿表数据-->
    <userZyList ref="userZyListsRef"></userZyList>
    <!--填报-->
    <filingDialog ref="filingDialogsRef"></filingDialog>
    <report ref="reportRef" :studentData="studentData" />
  </div>
</template>

<script setup>
import report from './module/report.vue';
// import { getIsGKB } from "@/api/appv2/appv1";
import addUserInfo from './module/addUserInfo.vue';
import lookuserDate from './module/lookuserDate.vue';
import { Plus, Bottom } from '@element-plus/icons-vue';
import userUpdate from './module/userUpdate.vue';
import userZyList from './module/userZyList.vue';
import filingDialog from './module/filingDialog.vue';
import batchDistribution from './module/batchDistribution.vue';
import { ref } from 'vue';
import {
  tzyOrders,
  tzyOrdersCount,
  tzyOrdersCreate,
  tzyOrdersListFilter,
  tzyOrdersExport,
  getProvince,
} from '@/api/leader/Filling.js';
import bus from '@/utils/bus.js';
import { accountList } from '@/api/system/account.js';
import { ElMessage } from 'element-plus';
import zhCn from 'element-plus/es/locale/lang/zh-cn';
const reportRef = ref(null);
const batchDistributionRef = ref(null);
const addUserInfoRef = ref(null);
const lookuserDateRef = ref();
const userUpdatesRef = ref(null);
const userZyListsRef = ref(null);
const filingDialogsRef = ref(null);

const tableData = ref([]);
const pageData = ref({
  page: 1,
  pageSize: 10,
  total: 0,
  search: '',
});
const totalCount = ref({});
const provincelist = ref([]); // 省份
const gaokaoyear = ref([]); // 高考年份
const statuslist = ref([]); // 查询状态
const kd_price = ref(null); // 客单价格
// const searchKey = ref('')
const isRequest = ref(false);
const teacherArr = ref([]); // 老师数组
const selStudentArr = ref([]); // 选中学生数组
const isGkData = ref({});
const studentData = ref({});
const handleEva = (data) => {
  localStorage.setItem('student_id', data.studentId);
  studentData.value = data.student;
  if (data.evaluationCount > 0) {
    reportRef.value.handleOpenReport(data);
  } else {
    return;
  }
};
bus.on('refreshList', () => {
  pageData.value.page = 1;
  pagination();
});
// const fetchIsGKB = () => {
//   getIsGKB().then((res) => {
//     isGkData.value = res.data;
//     if (isGkData.value.isGKB == "1") {
//       ElMessage({
//         message: "当前为高考版",
//         type: "warning",
//       });
//     }
//   });
// };
// fetchIsGKB();
const fetchProvince = () => {
  getProvince().then((res) => {
    provincelist.value = res.data;
  });
};
fetchProvince();
function searchDate() {
  tzyOrdersListFilter().then((res) => {
    // provincelist.value = res.data[0].data;
    gaokaoyear.value = res.data[1].data;
    statuslist.value = res.data[2].data;
    kd_price.value = res.data.kd_price;
  });
}
searchDate();

function getTzyCount() {
  tzyOrdersCount().then((res) => {
    totalCount.value = res.data;
  });
}
getTzyCount();

function searchChange() {
  // 添加查询参数
  // pageData.value.search = searchKey.value
  pageData.value.page = 1;
  pagination();
}

function pagination() {
  // pageData.value.page = page
  // 分页加载请求数据
  if (isRequest.value) return;
  isRequest.value = true;

  let data = pageData.value;
  delete data['total'];
  Object.keys(data).forEach((key) => {
    if (data[key].length == 0) {
      delete data[key];
    }
  });

  tzyOrders(data)
    .then((res) => {
      isRequest.value = false;

      tableData.value = res.data.data;

      pageData.value.page = res.data.current_page;
      pageData.value.total = res.data.total;
    })
    .catch(() => {
      isRequest.value = false;
    });
}
pagination();

getAccountList();
// 获取老师列表
function getAccountList() {
  accountList({
    pageSize: 100,
  }).then((res) => {
    teacherArr.value = res.data.data;
  });
}

// 学生勾选数据改变
function handleSelectionChange(val) {
  selStudentArr.value = val;
}

function onClickAccounList(command) {
  let item = command.item;
  let index = command.index;

  let data = {};
  data['id'] = tableData.value[index].id;
  data['teacherId'] = item.id;
  data['teacher'] = item.realName;

  // 更新用户信息
  tzyOrdersCreate(data).then(() => {
    tableData.value[index].teacherId = item.id;
    tableData.value[index].teacher = item.realName;
  });
}

// 批量分配
function onClickBatchDistribution() {
  if (selStudentArr.value.length == 0) {
    ElMessage({
      message: '请选择需要分配的学生',
      type: 'warning',
    });
    return;
  }
  batchDistributionRef.value.openChange();
}

// 导出客单列表
function onClickOrdersExport() {
  tzyOrdersExport(pageData.value).then((res) => {
    window.location.href = res.data.url;
    ElMessage.success('导出成功');
  });
}

// 创建用户
function addUserOrder() {
  addUserInfoRef.value.showAddUserInfo();
}

// 用户详情
function lookUserInfo(val) {
  lookuserDateRef.value.openChange(val);
}

// 点击查看志愿列表
function onClickzybList(val) {
  userZyListsRef.value.openChange(val);
}

function lookGradeChange(val) {
  // if (
  //   isGkData.value.isGKB == "1" &&
  //   val.student.score != 0 &&
  //   val.student.sgid
  // ) {
  //   ElMessage({
  //     message: "高考版只能修改一次",
  //     type: "warning",
  //   });
  //   return;
  // } else {
  userUpdatesRef.value.openChange(val, isGkData.value);
  // }
}

function fillSubmitChange(val) {
  localStorage.setItem('student_id', val.studentId);
  localStorage.setItem('student_Province', val.gkaProvinceNumId);
  filingDialogsRef.value.openChange(val, isGkData.value);
}
</script>
<style lang="scss" scoped>
.eva {
  cursor: pointer;
}

.zyb-count {
  background: #fff;
  border-radius: 4px 4px 4px 4px;
  opacity: 1;
  border: 1px solid #165dff;
  padding: 5px 10px;
  font-size: 14px;
  font-family:
    PingFang SC-Regular,
    PingFang SC;
  font-weight: 400;
  line-height: 14px;
  display: flex;
  justify-content: space-between;
  color: #165dff;
}

.box-card {
  margin: 20px;

  .cardsize {
    display: flex;
    align-items: center;
    padding: 10px;

    div {
      margin-left: 20px;
    }
  }
}
</style>
